<ss-platform-layout-setting>
  <ss-platform-layout-setting-left>
    <ss-platform-tabs #tabs>
      <ss-platform-tab title="表单">
        <div style="padding: 10px;">
          <dl class="field-cell">
            <dt><span class="color-gray">帮助</span></dt>
            <dd>
              <div class="set-item"><a href="javascript:void(0)">修改</a></div>
            </dd>
          </dl>
          <dl class="field-cell">
            <dt><strong>字段顺序</strong></dt>
            <dd>
              <label><input type="checkbox">表单字段与表格列的顺序保持一致</label>
            </dd>
          </dl>
          <dl class="field-cell">
            <dt><strong>字段名称与值的布局</strong></dt>
            <dd>
              <div class="field-layout clearfix">
                <div class="field-layout-horizontal current">
                  <span class="thumb"></span>
                  <p>左右</p>
                </div>
                <div class="field-layout-vertical">
                  <span class="thumb"></span>
                  <p>上下</p>
                </div>
              </div>
              <div class="explain">1行中最多可拖入2个字段</div>
            </dd>
          </dl>
        </div>
      </ss-platform-tab>
      <ss-platform-tab title="字段" #setPropertyTab>
        <div style="padding:10px;">
          <div class="empty" *ngIf="!cell">
            <p>还没有选择字段</p>
          </div>
          <ng-container *ngIf="cell">
            <ss-platform-field [ss-edit-title]="true" [ss-type]="cell.field.type" [ss-model]="cell.field"></ss-platform-field>
          </ng-container>
        </div>
      </ss-platform-tab>
      <ss-platform-tab title="添加" [active]="true">
        <div class="field-list" style="padding: 10px;">
          <dl>
            <dt><strong>数据字段</strong></dt>
            <dd>
              <ul class="clearfix">
                <li draggable="true"><i>&#xe011;</i><span>文本</span></li>
                <li draggable="true"><i>&#xe035;</i><span>号码</span></li>
                <li draggable="true"><i>&#xe036;</i><span>数值</span></li>
                <li draggable="true"><i>&#xe038;</i><span>金额</span></li>
                <li draggable="true"><i>&#xe039;</i><span>计算</span></li>
                <li draggable="true"><i>&#xe040;</i><span>选项</span></li>
                <li draggable="true"><i>&#xe041;</i><span>下拉菜单</span></li>
                <li draggable="true"><i>&#xe042;</i><span>工作区成员</span></li>
                <li draggable="true"><i>&#xe043;</i><span>日期和时间</span></li>
                <li draggable="true"><i>&#xe044;</i><span>图片</span></li>
                <li draggable="true"><i>&#xe045;</i><span>附件</span></li>
                <li draggable="true"><i>&#xe046;</i><span>位置</span></li>
                <li draggable="true"><i>&#xe047;</i><span>关联其他表格</span></li>
              </ul>
            </dd>
          </dl>
          <dl>
            <dt><strong>布局字段</strong></dt>
            <dd>
              <ul class="clearfix">
                <li draggable="true"><i>&#xe048;</i><span>表单说明</span></li>
                <li draggable="true"><i>&#xe049;</i><span>分隔符</span></li>
              </ul>
            </dd>
          </dl>
          <dl>
            <dt><strong>标签页</strong></dt>
            <dd>
              <ul class="clearfix">
                <li draggable="true"><i>&#xe050;</i><span>当前表单字段</span></li>
                <li draggable="true"><i>&#xe050;</i><span>关联数据字段</span></li>
                <li draggable="true"><i>&#xe050;</i><span>子表</span></li>
                <li draggable="true"><i>&#xe050;</i><span>仪表盘</span></li>
              </ul>
            </dd>
          </dl>
        </div>
      </ss-platform-tab>
    </ss-platform-tabs>
  </ss-platform-layout-setting-left>
  <ss-platform-layout-setting-right>
    <div class="ss-tables-publish-form-container">
      <!-- 自定义form -->
      <ss-platform-dynamic-form [ss-fields]="$publish.fields" [ss-layouts]="$publish.layouts" (onSelectCell)="tabs.active(setPropertyTab);onSelectCell($event)" (onDeleteCell)="this.cell=null;"></ss-platform-dynamic-form>
      <!-- 没有数据 -->
      <div class="item-tab">
        <div class="tab-guide">
          <p>将字段拖到这里进行设置</p>
        </div>
      </div>
      <div class="item-tab">
        <div class="tab-guide">
          <i>&#xe050;</i>
          <p>将标签页拖到这里进行设置</p>
        </div>
      </div>
    </div>
  </ss-platform-layout-setting-right>
</ss-platform-layout-setting>
